<!DOCTYPE html>
<html>
    <head lang="zh-cn">
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=2.0, user-scalable=1">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="format-detection" content="telephone=no">
        <base href="https://coding.net"/>
        <title>Coding Mart Quote List</title>

        <script type="text/javascript" src="../vendor/jquery/dist/jquery.min.js"></script>
        <script type="text/javascript" src="../vendor/mustache.js/mustache.min.js"></script>

        <style>
            html {
                font-size: 14px;
            }
            body {
                font-family: PingFang SC,Helvetica Neue,Helvetica,Hiragino Sans GB,Arial,Microsoft YaHei,\\5FAE\8F6F\96C5\9ED1,sans-serif;
                padding: 0;
                margin: 0;
                background: #F0F2F5;
            }
            section.title {
                color: #999999;
                padding: 1rem;
            }
            #container {
                padding: 1rem;
                background: #fff;
            }
            div.platform-label {
                border-bottom: .1rem solid hsla(212,9%,63%,.3);
                margin-bottom: 1rem;
            }
            label {
                font-size: 1.5rem;
                border-bottom: .5rem solid hsla(212,9%,63%,.3);
                display: inline-block;
            }
            label span {
                color: #979fa8;
                margin-left: 0.5rem;
            }
            table, th, td {
                border-collapse: separate;
                border-spacing: 0;
                font-size: 1rem;
            }
            table {
                width: 100%;
                margin-bottom: 2rem;
                table-layout: fixed;
            }
            th {
                font-weight: 400;
                padding: 1rem;
                background: #f2f5f7;
                border-top: 1px solid hsla(212,9%,63%,.2);
                border-bottom: 1px solid hsla(212,9%,63%,.2);
            }
            th:first-child {
                width: 4rem;
                border-left: 1px solid hsla(212,9%,63%,.2);
                border-top-left-radius: .4rem;
            }
            th:nth-child(2) {
                width: 6rem;
            }
            th:last-child {
                border-right: 1px solid hsla(212,9%,63%,.2);
                border-top-right-radius: .4rem;
            }
            td {
                background: #fff;
                border-left: 1px solid hsla(212,9%,63%,.2);
                border-bottom: 1px solid hsla(212,9%,63%,.2);
                padding: .8rem;
            }
            td.category {
                text-align: center;
            }
            td span {
                font-size: .8rem;
                margin-right: .4rem;
                white-space: nowrap;
                cursor: pointer;
            }
            td span:hover {
                background-color: #ffebcd;
            }
            tr td:last-child {
                border-right: 1px solid hsla(212,9%,63%,.2);
            }
            td.last-module {
                border-bottom-left-radius: .4rem;
            }
            tbody tr:last-child td:last-child {
                border-bottom-right-radius: .4rem;
            }
        </style>
    </head>
    <body>
        <section class="title">
            功能清单
        </section>
        <section id="container"></section>

        <!--替换数据-->
        <script>
            window.data = ${webview_content};
        </script>

        <script id="template" type="text/template">
            {{#data}}
                <div class="platform-label">
                    <label>
                        {{platform}}
                        <span>{{_count}}</span>
                    </label>
                </div>
                <table>
                    <thead>
                        <tr>
                            <th>分类</th>
                            <th>模块</th>
                            <th>功能点</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{#category}}
                            {{#module}}
                                <tr>
                                    {{#_isFirstRowInModule}}
                                        <td class="category {{#_isLastRowInModule}} last-module {{/_isLastRowInModule}}"
                                            rowspan="{{module.length}}">
                                            {{_categoryName}}
                                        </td>
                                    {{/_isFirstRowInModule}}

                                    <td>{{name}}</td>

                                    <td>
                                        {{#function}}
                                            <span>{{.}}</span>
                                        {{/function}}
                                    </td>
                                </tr>
                            {{/module}}
                        {{/category}}
                    </tbody>
                </table>
            {{/data}}
        </script>

        <script>
            $(function() {
                if (!window.data) {
                    return;
                } else {
                    prepare(window.data);
                }

                var content = Mustache.render($('#template').html(), {data: window.data});
                $('#container').html(content);
            });

            // 插入一些字段，以便让mustache更方便的render，插入字段以_开头
            function prepare(data) {
                if (!data) {
                    return;
                }

                var i, j, k, l;
                for (i = 0; i < data.length; i++) {

                    data[i]._count = 0;
                    l = data[i].category.length;
                    for (j = 0; j < l; j++) {

                        for (k = 0; k < data[i].category[j].module.length; k++) {
                            // 为了让［分类名］插入到第一行，需要在module里面加一些标记变量
                            if (k === 0) {
                                data[i].category[j].module[0]._isFirstRowInModule = true;
                                data[i].category[j].module[0]._categoryName = data[i].category[j].name;

                                // 为了给左下角的td加个圆角
                                if (j === l - 1) {
                                    data[i].category[j].module[0]._isLastRowInModule = true;
                                }
                            }

                            // 计算platform总共有几个功能
                            data[i]._count += data[i].category[j].module[k].function.length;
                        }
                    }
                }
            }
        </script>
    </body>
</html>
